<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js"></script>
    <script src="js/login.js"></script>
</head>
<body>
<div id="app">
   <txx></txx>
       <nav class="c900 flex" style="margin: 10px auto 0px">
           <div class="flex" style="justify-content: center;">
               <el-link :underline="false" v-for="c in car" @click="searchBybrand(c.brand)">{{c.brand}}</el-link>

           </div>
           <el-input placeholder="搜索关键字" style="width: 250px" v-model="searchText">
               <el-button slot="append" icon="el-icon-search" @click="searchByText"></el-button>
           </el-input>
       </nav>
       <main class="c900 flex" style="background-color: transparent; padding: 0px; justify-content: flex-start">
           <div class="car" v-for="c in car">
               <img :src="c.image">
               <div >
                   <div class="price">￥{{c.price}}<small>元/天</small></div>
                   <el-rate v-model="rate"></el-rate>
                   <p>{{c.brand}}<br><small>{{c.model}}</small></p>
                   <a class="abtn" :href="'detail.html?id='+c.id">租 赁</a>
               </div>
           </div>
           <div style="width: 100%; text-align: center; margin-top: 10px">
               <el-button type="primary" round>更多车辆</el-button>
           </div>
       </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            rate:3.5,
            car:{},
            searchText:""
        },
        created(){
            axios.get("txxCar/allCar").then(res=>{
                this.car = res.data.data
            })

        },
        methods:{
            searchBybrand(brand){
                axios.get("txxCar/searchBybrand", {
                    params:{
                        brand: brand
                    }
                }).then(res=>this.car = res.data)
            },
            searchByText(){
                axios.get("txxCar/searchByText", {
                    params:{
                        searchText: this.searchText
                    }
                }).then(res=>this.car = res.data)
            }
        }

    })
</script>
</body>
</html>